<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详细</title>
    <link rel="stylesheet" href="../web_p2/_reset.css">
    <link rel="stylesheet" href="./css/common2.css">
    <link rel="stylesheet" href="./css/basep5.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <div class="mobile_app">
  <!-- 头部 -->
  <header>
      <!-- 顶部导航 -->
      <div class="topnav">
        <!-- 返回按钮 -->
        <div class="back_btn">
            <a href=""> <button>Back</button></a>
        </div>
        <!-- 我的 -->
        <div class="pro_title">
            <span>产品详细</span>
        </div>
        <!-- 查看消息按钮 -->
        <div class="topnav_icon">
            <a href=""><img src="./img/page5/形状9.png" alt=""></a>
            
    </div>
    </div>
</header>
<!-- 主体 -->
<main>
 <div class="pro_pic"><img src="./img/page5/图层5.png" alt=""></div>
 <!-- 产品详细信息 -->
 <div class="pro_info">
     <!-- 价格 -->
     <div class="price">
         <div class="price_left"><span>￥32</span></div>
         <button class="price_right"><a href="">购买</a></button>
     </div>
     <!-- 好评 -->
     <div class="good_comment">
         <!-- 标题左 -->
      <div class="good_comment_left">
          <img src="./img/page5/形状12.png" alt="">
        <span class="left_words" >好评度</span><span class="left_number">99%</span>
    </div> 
     <!-- 标题-右 -->
       <div class="good_comment_right"><span>共605个评价></span></div> 
     </div>
    </div>
     <!-- 适用商店范围 -->
     <div class="use_range_shop">
       <div class="use_range_shop_title">
        <div class="urs_titleleft"><span>适用商户</span></div>
        <div class="urs_titleright"><a href=""> <img src="./img/page5/.png" alt=""></a></div>
       </div>  
        <!-- 商店-->
     <div class="shop_list">
        <!--第一栏商店  -->
  <div class="shop_f1">
      <!-- 左边图片 -->
      
      <div class="left_pic"><img src="./img/page5/图层2.png" alt="">
        <div class="pic_words">正佳店</div>
    </div>
      
      <!-- 右边详细信息 -->
   <div class="right_info">
       <!-- 商店名 -->
       <div class="shop_name"><span>万岁寿司（正佳店）</span></div>
       <!-- 商店评价 -->
       <div class="shop_comment">
        <img src="./img/page5/形状16副本.png" alt="">
        <img src="./img/page5/形状16副本.png" alt="">
        <img src="./img/page5/形状16副本.png" alt="">
        <img src="./img/page5/形状16副本.png" alt="">
        <img src="./img/page5/形状16副本.png" alt="">
        <span>10分</span>
      </div>
      <!-- 和我距离 -->
       <div class="your_distanse"><span>离你100m</span></div>
       <!-- 查看详细 -->
       <div class="shop_desc"><a href="">查看详情 >></a></div>
   </div>
   <!-- 进入按钮 -->
   <div class="enter_btn">
       <button><a href="">进入</a></button>
   </div>
  </div>
        <!-- 第二栏商店 -->
        <div class="shop_f2">
          <!-- 左边图片 -->
      <div class="left_pic"><img src="./img/page5/图层3.png" alt="">
        <div class="pic_words">体育西店</div>
    </div>
      <!-- 右边详细信息 -->
   <div class="right_info">
       <div class="shop_name"><span>万岁寿司（体育西店）</span></div>
       <div class="shop_comment">
        <img src="./img/page5/形状16副本.png" alt="">
        <img src="./img/page5/形状16副本.png" alt="">
        <img src="./img/page5/形状16副本.png" alt="">
        <img src="./img/page5/形状16副本.png" alt="">
        <img src="./img/page5/形状16副本.png" alt="">
        <span>10分</span>
      </div>
       <div class="your_distanse"><span>离你100m</span></div>
       <div class="shop_desc"><a href="">查看详情 >></a></div>
   </div>
   <div class="enter_btn">
       <button><a href="">进入</a></button>
   </div>    
        </div>
        <!-- 第三栏商店 -->
        <div class="shop_f3">
              <!-- 左边图片 -->
      <div class="left_pic"><img src="./img/page5/图层4.png" alt="">
        <div class="pic_words">昌岗店</div></div>
      <!-- 右边详细信息 -->
   <div class="right_info">
       <div class="shop_name"><span>万岁寿司（昌岗店）</span></div>
       <div class="shop_comment">
        <img src="./img/page5/形状16副本.png" alt="">
        <img src="./img/page5/形状16副本.png" alt="">
        <img src="./img/page5/形状16副本.png" alt="">
        <img src="./img/page5/形状16副本.png" alt="">
        <img src="./img/page5/形状16副本.png" alt="">
        <span>10分</span>
      </div>
       <div class="your_distanse"><span>离你100m</span></div>
       <div class="shop_desc"><a href="">查看详情 >></a></div>
   </div>
   <div class="enter_btn">
       <button><a href="">进入</a></button>
   </div>      
        </div>
         <!-- 第四栏商店 -->
         <div class="shop_f4">
            <!-- 左边图片 -->
    <div class="left_pic"><img src="./img/page5/图层4.png" alt="">
      <div class="pic_words">昌岗店</div></div>
    <!-- 右边详细信息 -->
 <div class="right_info">
     <div class="shop_name"><span>万岁寿司（昌岗店）</span></div>
     <div class="shop_comment">
      <img src="./img/page5/形状16副本.png" alt="">
      <img src="./img/page5/形状16副本.png" alt="">
      <img src="./img/page5/形状16副本.png" alt="">
      <img src="./img/page5/形状16副本.png" alt="">
      <img src="./img/page5/形状16副本.png" alt="">
      <span>10分</span>
    </div>
     <div class="your_distanse"><span>离你100m</span></div>
     <div class="shop_desc"><a href="">查看详情 >></a></div>
 </div>
 <div class="enter_btn">
     <button><a href="">进入</a></button>
 </div>      
      </div>
       </div>
     </div>
    
</main>
<!-- 底部 -->
<footer>
 <!-- 底部导航 -->
<a href="#"><i class="iconfont bottom_pic">&#xe634;</i><p>首页</p></a>
<a href="./classify.html"><i class="iconfont bottom_pic">&#xeac4;</i><p>分类</p></a>
<a href="./find.html"><i class="iconfont bottom_pic">&#xe8af;</i><p>发现</p></a>
<a href="./mine.html"><i class="iconfont bottom_pic">&#xe8a0;</i><p>我的</p></a>
</footer>

    </div>
  
</body>
</html>